<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.copy-btn {
	padding-left: 4px;
	cursor: pointer;
}

.viewer-container {
	z-index: 9999 !important;
}
</style>
</head>
<body>
	<script src="https://cdn.staticfile.org/dayjs/1.7.8/dayjs.min.js"></script>
	<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
	<link href="https://cdn.staticfile.org/viewerjs/1.3.3/viewer.min.css" rel="stylesheet">
	<script src="https://cdn.staticfile.org/viewerjs/1.3.3/viewer.min.js"></script>
	<div th:replace="common/header::html"></div>
	<div id="q-app">
		<div class="q-pa-md">
			<q-table color="primary" :data="tableData" :columns="tableColumns" :pagination.sync="tablePagination" :rows-per-page-options="[10, 30, 50, 100]" :loading="tableDataLoading" @request="loadTableData">
			<template v-slot:top-left>
			<div class="q-gutter-md row query-cond">
				<q-input outlined v-model="collectionName" label="藏品名称" :dense="true"></q-input>
				<q-btn color="primary" label="查询" icon="search" @click="refreshTable"></q-btn>
			</div>
			</template> <template v-slot:top-right>
			<div class="q-gutter-md row"></div>
			</template> <template v-slot:body-cell-give_from_info="props"> <q-td :props="props">
			<div>
				<div>手机号:{{props.row.giveFromMobile}}</div>
				<div>区块链地址:{{props.row.giveFromBlockChainAddr}}</div>
			</div>
			</q-td> </template> <template v-slot:body-cell-give_to_info="props"> <q-td :props="props">
			<div>
				<div>手机号:{{props.row.giveToMobile}}</div>
				<div>区块链地址:{{props.row.giveToBlockChainAddr}}</div>
			</div>
			</q-td> </template> <template v-slot:body-cell-collection_info="props"> <q-td :props="props">
			<div style="display: flex; align-items: center;">
				<div>
					<img :src="props.row.collectionCover" style="height: 40px; width: 40px; object-fit: contain;">
				</div>
				<div style="padding-left: 4px;">
					<div>{{props.row.collectionName}}</div>
					<div>#{{props.row.collectionSerialNumber}}/{{props.row.quantity}}</div>
				</div>
			</div>
			</q-td> </template> <template v-slot:loading> <q-inner-loading showing color="primary"></q-inner-loading> </template> </q-table>
		</div>
	</div>
	<script src="/js/collection-give-record.js"></script>
</body>
</html>